<script setup lang="ts">
import { computed, ref, watchEffect } from 'vue'
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
import type { BusinessUIQueryColumnType } from '@/types/custom'

import TemplateGrid from '@/views/components/grid/TemplateGrid.vue'

interface Props {
  modelValue?: string
  item: BusinessUIQueryColumnType
  disabled?: boolean
  formParams?: TypedAny
}

const props = defineProps<Props>()

const isShow = ref(true)
const tempRef = ref()
const business_id = ref()
const params = ref<TypedAny>({})

const open = () => {
  isShow.value = !isShow.value
}

watchEffect(() => {
  const { default_value_parse } = props.item
  const option: TypedAny = {}
  if (props.formParams) {
    for (const k in default_value_parse) {
      option[k] = props.formParams[k]
    }
  }
  if (Object.values(option).filter((f) => f).length) {
    params.value = option
    business_id.value = props.item.business_id
  }
})

const isInsert = computed(() => {
  const style = props.item.set_json_parse.props.style || ''
  return style.indexOf('height') === -1
})

const onGridReady = (value: number) => {
  props.item.hide = !value
}
</script>

<template>
  <div v-if="business_id">
    <el-button :icon="isShow ? ArrowUp : ArrowDown" @click="open" plain type="primary">
      {{ item.title }}
    </el-button>
    <div v-show="isShow" class="layout-container relative" v-bind="item.set_json_parse.props || {}">
      <TemplateGrid
        ref="tempRef"
        :insert="isInsert"
        v-model="business_id"
        :params="params"
        :disabled="disabled"
        :box-shadow="false"
        :ready="onGridReady"
      />
    </div>
  </div>
</template>
